<template>
	<view class="container">
		<z-paging-swiper>
			<view slot="top">
				<u-navbar height="50" back-icon-color="#333" title="优惠劵" title-color="#333" title-size="36">
				</u-navbar>
				<view class="tabsView">
					<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" @change="tabsChange"
						:is-scroll="false" active-color="#AB7326" swiperWidth="750">
					</u-tabs-swiper>
				</view>
			</view>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging ref="paging" v-model="couponList" @query="queryList" :flex="true" empty-view-text="暂无数据~"
						empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
						<view class="itemView" v-for="(item,index) in couponList" :key="index">
							<view class="couponView">
								<view class="moneyView">
									<view class="couponMoney">¥<text>{{item.coupon_amount}}</text></view>
									<view class="couponTips" v-if="item.is_no_threshold == 1">直减劵</view>
									<view class="couponTips" v-else>满减劵</view>
								</view>
								<view class="line"></view>
								<view class="couponInfoView">
									<view class="InfoView">
										<view class="couponTitle">{{item.coupon_name}}</view>
										<view class="couponTime">有效期至 {{showTime(item.expire_time)}}</view>
									</view>
									<view class="couponBtn" @click="onCouponUse(item)">去使用</view>
								</view>
							</view>
							<view class="couponText" v-if="item.coupon_type == 1">
								<text v-if="item.is_no_threshold == 1">全场商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">全场商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 2">
								<text v-if="item.is_no_threshold == 1">指定分类商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定分类商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 3">
								<text v-if="item.is_no_threshold == 1">指定商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging ref="paging2" v-model="couponList2" @query="queryList2" :flex="true"
						empty-view-text="暂无数据~" empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
						<view class="itemView" v-for="(item,index) in couponList2" :key="index">
							<view class="couponView">
								<view class="moneyView2">
									<view class="couponMoney2">¥<text>{{item.coupon_amount}}</text></view>
									<view class="couponTips2" v-if="item.is_no_threshold == 1">直减劵</view>
									<view class="couponTips2" v-else>满减劵</view>
								</view>
								<view class="line2"></view>
								<view class="couponInfoView2">
									<view class="InfoView">
										<view class="couponTitle2">{{item.coupon_name}}</view>
										<view class="couponTime2">有效期至 {{showTime(item.expire_time)}}</view>
									</view>
									<image class="couponIcon" src="/static/use.png"></image>
								</view>
							</view>
							<view class="couponText" v-if="item.coupon_type == 1">
								<text v-if="item.is_no_threshold == 1">全场商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">全场商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 2">
								<text v-if="item.is_no_threshold == 1">指定分类商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定分类商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 3">
								<text v-if="item.is_no_threshold == 1">指定商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging ref="paging3" v-model="couponList3" @query="queryList3" :flex="true"
						empty-view-text="暂无数据~" empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
						<view class="itemView" v-for="(item,index) in couponList" :key="index">
							<view class="couponView">
								<view class="moneyView2">
									<view class="couponMoney2">¥<text>{{item.coupon_amount}}</text></view>
									<view class="couponTips2" v-if="item.is_no_threshold == 1">直减劵</view>
									<view class="couponTips2" v-else>满减劵</view>
								</view>
								<view class="line2"></view>
								<view class="couponInfoView2">
									<view class="InfoView">
										<view class="couponTitle2">{{item.coupon_name}}</view>
										<view class="couponTime2">有效期至 {{showTime(item.expire_time)}}</view>
									</view>
									<image class="couponIcon" src="/static/expire.png"></image>
								</view>
							</view>
							<view class="couponText" v-if="item.coupon_type == 1">
								<text v-if="item.is_no_threshold == 1">全场商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">全场商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 2">
								<text v-if="item.is_no_threshold == 1">指定分类商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定分类商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
							<view class="couponText" v-if="item.coupon_type == 3">
								<text v-if="item.is_no_threshold == 1">指定商品可用，无门槛使用 限制优惠券</text>
								<text v-if="item.is_no_threshold == 0">指定商品可用，满{{item.threshold_amount}}元可用</text>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				current: 0,
				swiperCurrent: 0,
				tabsList: [{
					name: '可使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期'
				}],
				page: 1,
				couponList: [],
				couponList2: [],
				couponList3: []
			}
		},
		onLoad() {
			let self = this;
			this.$nextTick(function() {
				self.$refs.paging.reload();
			});
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			queryList(page, pageSize) {
				let self = this;
				self.$user.myCouponList({
					limit: pageSize,
					page: page
				}, true).then(res => {
					self.$refs.paging.complete(res.list);
				}).catch(res => {
					self.$refs.paging.complete();
				});
			},
			queryList2(page, pageSize) {},
			queryList3(page, pageSize) {},
			showTime(time) {
				return this.$utils.getThisData(time);
			},
		}
	}
</script>

<style>
	@import url('my-coupon.css');

	page {
		height: 100%;
		background: #F4F4F4;
	}
</style>
